import { defineComponent, ref } from "vue";
import Button from "@/components/Button";
import Modal from "@/components/Modal";
import Panel from "@/components/Panel";

const Modals = defineComponent({
  setup() {
    const visible = ref(false);
    return () => (
      <Panel class="bg-white">
        {{
          title: () => "Modals",
          default: () => (
            <>
              <Modal
                visible={visible.value}
                onClose={() => {
                  visible.value = false;
                }}
              >
                dddddeferwfregregtrh
              </Modal>
              <Button
                onClick={() => {
                  visible.value = true;
                }}
              >
                Show
              </Button>
            </>
          ),
        }}
      </Panel>
    );
  },
});

export default Modals;
